Bordes y más bordes

Hace tiempo comentaba los distintos bordes que podemos añadir a las imágenes con CSS, es una forma sencilla y atractiva de presentar las imágenes...
Días atrás me comentaban que añadiendo una clase también es posible añadir borde a las imágenes, eso es cierto porque añadiendo una clase podemos escoger el tipo de borde y la imagen que se lo vamos a añadir.

Para crear un borde primero añadiremos unas líneas a la CSS como siempre y para ubicarnos rápidamente lo haremos justo antes de ]]></b:skin>

Añadimos:
.imageborder-2 {
border: double #B0171F; 4px;
}

Luego nos dirigimos al editor de entradas y añadimos lo siguiente:
<img alt="border" class="imageborder-2" src="aquí-url-de-la-imagen" />

Después subimos la imagen que vamos a utilizar, una vez obtenemos el código copiamos la url de la imagen y la pegamos en el anterior código donde dice aquí-url-de-imagen.
Damos salida a la entrada y veríamos algo así:



Con una imagen como fondo también podemos obtener marcos muy atractivos, bastará con añadir los estilos en nuestra plantilla, el código de la imagen será siempre el mismo.



.imageborder-2 {
background:url("url-imagen");
}



.imageborder-2 {
background:url("url-imagen");
border: 1px double grey;
}


(Este borde es muy elegante, añadí color de fondo porque sobre fondo blanco pierde su encanto)

.imageborder-2{
padding:8px;
border:2px outset #F6FAF4;
}



.imageborder-2{
background-color: #FFF;
border: 5px dashed #A2B5CD;
}



.imageborder-2 {
border-left: 3px dotted black;
border-top: 3px dotted black;
border-bottom: 2px solid #CCCCCC;
border-right: 2px solid #CCCCCC;
}

Con todo esto lo que conseguimos es crear un marco para una imagen determinada, si deseamos añadir más de un marco y que sean diferentes lo que haríamos sería crear otra clase, añadir en la plantilla:

.imageborder-1 {
border: double #B0171F; 4px;
}

Le cambiamos el nombre y en lugar de llamarle imageborder-2 le llamaremos imageborder-1 para añadir la imagen haríamos lo mismo, en lugar de añadir:

<img alt="border" class="imageborder-2" src="aquí-url-de-la-imagen" />

añadimos lo siguiente:

<img alt="border" class="imageborder-1" src="aquí-url-de-la-imagen" />

La única diferencia sería crear un nuevo estilo con nombre diferente y utilizar el nuevo nombre donde añadimos la url de la imagen.

Ya podemos añadir no sólo un borde a las imágenes sino distintos bordes, si nuestra idea es utilizar siempre el mismo borde hay una forma de hacerlo mucho más sencilla.

Lo que haremos será añadir los estilos a las imágenes directamente, buscamos en la plantilla donde dice:
.post img {
padding:4px;
}

Añadiendo cualquiera de los estilos
.post img {
padding:4px;
background:#58554E;
border:4px solid #CCC;
}


Simplemente con eso nuestras imágenes de los post tendrán borde.

También podemos crear un efecto al marco añadiendo el evento hover, tendríamos que añadir:
.post img {
padding:4px;
background:#58554E;
border:4px solid #CCC;
}
.post img:hover {
padding:4px;
background:#CCC;
border:4px solid #58554E;
}

La imaginación es lo que cuenta y el resultado el que tú quieras.